<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="keywords" content="#">
    <meta name="description" content="#">
    <title>芜湖旅游网</title>
    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="assets/images/favicon.ico">
    <link rel="shortcut icon" href="assets/images/favicon.ico">
    <!-- Bootstrap -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Fontawesome -->
    <link href="assets/css/font-awesome.css" rel="stylesheet">
    <!-- Flaticons -->
    <link href="assets/css/font/flaticon.css" rel="stylesheet">
    <!-- Slick Slider -->
    <link href="assets/css/slick.css" rel="stylesheet">
    <!-- Range Slider -->
    <link href="assets/css/ion.rangeSlider.min.css" rel="stylesheet">
    <!-- Datepicker -->
    <link href="assets/css/datepicker.css" rel="stylesheet">
    <!-- magnific popup -->
    <link href="assets/css/magnific-popup.css" rel="stylesheet">
    <!-- Nice Select -->
    <link href="assets/css/nice-select.css" rel="stylesheet">
    <!-- Custom Stylesheet -->
    <link href="assets/css/style2.css" rel="stylesheet">
    <!-- Custom Responsive -->
    <link href="assets/css/responsive.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
    <!-- CSS for IE -->
    <!--[if lte IE 9]>
        <link rel="stylesheet" type="text/css" href="css/ie.css" />
    <![endif]-->   
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script type='text/javascript' src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
    <![endif]-->
    <!-- place -->
</head>
<body>
    <!-- Start Header -->
    <header class="header">
        <!-- Topbar -->
        <div class="topbar bg-custom-blue">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="left-side">
                            <ul class="custom-flex">
                                <li>
                                    <a href="#" class="text-custom-white">
                                        <i class="fab fa-facebook-f"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="text-custom-white">
                                        <i class="fab fa-twitter"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="text-custom-white">
                                        <i class="fab fa-instagram"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="text-custom-white">
                                        <i class="fab fa-linkedin"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="right-side">
                            <ul class="custom-flex" id="custom-flex">
                                <li>
                                    <a href="#" class="text-custom-white">登录</a>
                                </li>
                                <li>
                                    <a href="#" class="text-custom-white">注册</a>
                                </li>
                               
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Topbar -->
        <!-- Navigation -->
        <div class="navigation">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="main-navigation">
                            <div class="logo">
                                <a href="#">
                                     <img src="assets/images/TuYang-logo.png" class="img-fluid image-fit" alt="img">
                                </a>
                            </div>
                            <div class="main-menu">
                                <div class="logo">
                                    <a href="index.html">
                                        <img src="assets/images/toor-logo.png" class="img-fluid image-fit" alt="img">
                                    </a>
                                </div>
                                <nav>
                                    <ul class="custom-flex">
                                        <li class="menu-item">
                                            <a href="index.jsp" class="text-light-dark">首页</a>
                                            
                                        </li>
                                        <li class="menu-item active">
                                            <a href="rooms-hotels.jsp" class="text-light-dark">酒店</a>
                                            
                                        </li>
                                        <li class="menu-item ">
                                            <a href="scenic.jsp" class="text-light-dark">景点</a>
                                            
                                        </li>
                                        
                                        <li class="menu-item">
                                            <a href="order.jsp" class="text-light-dark">我的订单</a>
                                        </li>
                                        <li class="menu-item">
                                            <a href="gallery.jsp" class="text-light-dark">我的收藏</a>
                                            
                                        </li>
                                        <li class="menu-item">
                                            <a href="person-center.jsp" class="text-light-dark">个人中心</a>
                                           
                                        </li>
                                    </ul>
                                </nav>
                                
                            </div>
                            <div class="hamburger-menu">
                                <div class="menu-btn">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Navigation -->
    </header>
    <!-- End Header -->
    <!-- Start Subheader -->
    <div class="subheader normal-bg section-padding">
        <div class="container">
            <div class="row">
                <h1 class="text-custom-white">H</h1>
                   <ul class="custom-flex justify-content-center">
                      <!--  <li class="fw-500">
                           <a href="index.html" class="text-custom-white">Home</a>
                       </li>
                       <li class="fw-500">
                           <a href="hotels.html" class="text-custom-white">Hotels</a>
                       </li>
                       -->
                   </ul>
                   
                  <!--  <div class="col-12">
                    <h1 class="text-custom-white">Hotels</h1>
                    <ul class="custom-flex justify-content-center">
                        <li class="fw-500">
                            <a href="index.html" class="text-custom-white">Home</a>
                        </li>
                        <li class="fw-500">
                            <a href="hotels.html" class="text-custom-white">Hotels</a>
                        </li>
                        <li class="active fw-500">
                           
                        </li>
                    </ul>
                </div> -->
                   
                   
            </div>
        </div>
    </div>
    <!-- End Subheader -->
    <!-- Start Blog -->
    <section class="section-padding bg-light-white">
        <div class="container">
            <div class="row" id="load-hotels-div">
                
                <div class="col-12">
                    <div class="listing-top-heading mb-xl-20">
                        <h6 class="no-margin text-custom-black"></h6>
                        <div class="sort-by">
                            <!-- <span class="text-custom-black fs-14 fw-600">排序方式</span>
                            <div class="group-form">
                                <select class="form-control form-control-custom custom-select">
                                    <option>价格从高到低</option>
                                    <option>价格从低到高</option>
                                </select>
                            </div> -->
                        </div>
                    </div>
                </div>
                
               <!-- 原来的一个酒店 -->
               <!--  <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="hotel-grid mb-xl-30">
                        <div class="hotel-grid-wrapper bx-wrapper">
                            <div class="image-sec animate-img">
                                <a href="#">
                                    <img src="assets/images/hotels/1.png" class="full-width" alt="img">
                                </a>
                            </div>
                            <div class="hotel-grid-caption padding-20 bg-custom-white p-relative">
                                <h4 class="title fs-16"><a href="#" class="text-custom-black">Hotel Hilton
                                <small class="text-light-dark">Paris france</small></a></h4>
                                <span class="price"><small>avg/night</small>$120</span>
                                <div class="action">
                                    <a class="btn-second btn-small" href="#">View</a>
                                    <a class="btn-first btn-submit" href="#">Book</a>
                                </div>
                            </div>
                        </div>
                    </div> -->
                </div>
                
               

          <!--   </div> -->
            
			<!-- 分页 -->
			<div class="row" id="hotels-page">
                <!-- <div class="col-12">
                    <nav>
                        <ul class="pagination justify-content-center">
                            <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                            <li class="page-item"><a class="page-link" href="#">1</a></li>
                            <li class="page-item active"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item"><a class="page-link" href="#">Next</a></li>
                        </ul>
                    </nav>
                </div> -->
            </div>
        </div>
    </section>
    <!-- End Blog -->


    <!-- Start Footer -->
       <!-- Start Footer -->
    <footer class="section-padding footer">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6">
                    <div class="footer-box mb-md-40">
                        <h4 class="text-custom-white fw-600">About Us</h4>
                        <p class="text-custom-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                        <p class="text-custom-white">
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry...
                        </p>
                        <ul class="custom-flex socials">
                            <li><a href="#" class="text-custom-white fs-14"><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="#" class="text-custom-white fs-14"><i class="fab fa-twitter"></i></a></li>
                            <li><a href="#" class="text-custom-white fs-14"><i class="fab fa-linkedin"></i></a></li>
                            <li><a href="#" class="text-custom-white fs-14"><i class="fab fa-youtube"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="footer-box mb-md-40">
                        <h4 class="text-custom-white fw-600">Quick Links</h4>
                        <ul class="custom links">
                            <li>
                                <a href="#" class="text-custom-white">Home</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">Hotels</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">Flights</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">Cruise</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">Blog</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">404</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">Contact Us</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="footer-box mb-sm-40">
                        <h4 class="text-custom-white fw-600">Instagram</h4>
                        <ul class="custom instagram " style="position: relative; height: 204px;">
                            <li style="position: absolute; left: 0px; top: 0px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_1.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 84.1406px; top: 0px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_2.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 168.281px; top: 0px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_3.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 0px; top: 68px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_4.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 84.1406px; top: 68px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_5.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 168.281px; top: 68px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_6.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 0px; top: 136px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_7.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 84.1406px; top: 136px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_8.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 168.281px; top: 136px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_9.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="footer-box mb-sm-40">
                        <h4 class="text-custom-white fw-600">Newsletter</h4>
                        <div class="newsletter">
                            <p class="text-custom-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- End Footer -->
    <!-- Start Copyright -->
    <div class="copyright">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <p class="text-custom-white">Copyright &copy; 2020. All rights reserved.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- End Copyright -->
    <div id="back-top" class="back-top">
      <a href="#top"><i class="flaticon-arrows"></i></a>
    </div>
    <!-- Place all Scripts Here -->
    <!-- jQuery -->
    <script src="assets/js/jquery.min.js"></script>
    <!-- Popper -->
    <script src="assets/js/popper.min.js"></script>
    <!-- Bootstrap -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- Range Slider -->
    <script src="assets/js/ion.rangeSlider.min.js"></script>
    <!-- Slick Slider -->
    <script src="assets/js/slick.min.js"></script>
    <!-- Datepicker -->
    <script src="assets/js/datepicker.js"></script>
    <script src="assets/js/datepicker.en.js"></script>
    <!-- Isotope Gallery -->
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <!-- Nice Select -->
    <script src="assets/js/jquery.nice-select.js"></script>
    <!-- magnific popup -->
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <!-- Maps -->
    <script src="https://ditu.google.cn/maps/api/js?key=AIzaSyDnd9JwZvXty-1gHZihMoFhJtCXmHfeRQg"></script>
    <!-- Custom Js -->
    <script src="assets/js/custom.js"></script>
    <!-- /Place all Scripts Here -->
    
    
    <script type="text/javascript">
	
	 $(document).ready(function(){
		//显示用户名和用户图片
			var user ="${sessionScope.user}";
			if(user!=""&&"${sessionScope.user.userPicture}"==null){
				$("#custom-flex").html("<li><img src=\"${pageContext.request.contextPath}/assets/images/dahaigui.jpg\"><li><li>用户名："+"${sessionScope.user.userName}"+"</li>");
			}else if(user!=""&&"${sessionScope.user.userPicture}"!=null){
				$("#custom-flex").html("<li><img style=\"width:30px;height:30px;  \" src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName="+
						"${sessionScope.user.userPicture}"+"\"><li>"+
						"<li>用户名："+"${sessionScope.user.userName}"+
						"<span style=\"margin-left:60px;cursor:pointer;\" id=\"btnLogout\">退出登录</span>"+
						"</li>");
			}else if(user==""){
				$("#custom-flex").html("<li><a href=\"userLogin.jsp\" class=\"text-custom-white\">登录</a></li>"+
						"<li><a href=\"register.jsp\" class=\"text-custom-white\">注册</a></li>");
			}
		 // 页面一进入，发起异步请求,酒店列表
		sendAJAX(1);
	 	
		 
		// 首页
		$(document).on("click","#first-page",function(){
			 // 获取当前页码
			 var pageNum = $("#pageInfo").data("pagenum");	 
			 console.log(pageNum);
			 // 判断
			 if(pageNum == 1){
				 alert("已经是首页");		
			 }else{
				 // 调用发送请求方法,参数页码
				 sendAJAX(1);
			 }	
		});
		
		// 上一页
		$(document).on("click","#previous-page",function(){
			 // 获取当前页码
			 var pageNum = $("#pageInfo").data("pagenum") -1;
			 
			 if(pageNum < 1){
				 // 拦截请求
				 alert("已经是第一页");
			 }else{
				// 调用发送请求方法,参数页码
				 sendAJAX(pageNum);
			 }
	 	});
	 	
		 // 下一页
		 $(document).on("click","#next-page",function(){
			 // 获取当前页码
			 var pageNum = eval($("#pageInfo").data("pagenum") + 1);		 
			 // 获取最大页码
			 var pages = $("#pageInfo").data("pages");
			 
			 if(pageNum > pages){
				 // 拦截请求
				 alert("已经是最后一页");
			 }else{
				// 调用发送请求方法,参数页码
				 sendAJAX(pageNum);
			 }
	 	})
		
	 	 // 尾页
	 	 $(document).on("click","#last-page",function(){
			 // 获取当前页码
			 var pageNum = $("#pageInfo").data("pagenum");	 
			 // 获取最大页码
			 var pages = $("#pageInfo").data("pages");
		 
			 if(pageNum == pages){
				 // 拦截请求
				 alert("已经是尾页");
			 }
			 // 调用发送请求方法,参数页码
			 sendAJAX(pages);
		
		     });
		     
		 // 页码
		 $(document).on("click",".current-page",function(){
			 
			 console.log("点击了页码");
			 // 获取当前显示的页码
			 var currentPageNum = $("#pageInfo").data("pagenum");	
			 // 获取当前超链接上表示的页码
			 var pageNum = $(this).text();
			 if(currentPageNum == pageNum){
				 return;
			 }
			// 调用发送请求方法,参数页码
			 sendAJAX(pageNum);		
	 	  });
		  
		 
		
		// 清空输入框
		$("#clear-search-button").click(function(){
			$("#hotelName").val("");
			sendAJAX(1);	
		});
		
		//对收藏按钮设置点击事件
		$(document).on("click","#btnGallery",function(){
			
			console.log("收藏按钮被点击了");
			var hotelId=$(this).data("hotelid");
			console.log("hotelId" + hotelId);
			
				$.ajax({
			   		 async:true,
			   		 type:"get",
			   		 url:"${pageContext.request.contextPath}/HotelServlet",
			   		 data:{
			   			 op:"insertGallery",
			   			 hotelId:hotelId,
			   			 userId:"${sessionScope.user.userId}"
			   		 },
			   		 success:function(result){
			   			 console.log(result);
			   			 if("success"== result){
			   				alert("收藏成功!");
			   			 }else{
			   				alert("该景点已经被收藏了!");
			   			 }
			   			
			   		 },
			   		 error:function(){
			   			 alert("异步请求失败!");
			   		 }
			   	 });
		});
		
		
	 
	});		// document.ready()结束处
		 
	
		 	
	  // 发送AJAX请求 
	 function sendAJAX(pageNum){
	 	 
		// 获取显示记录数
		 var pageSize = 12;
	 	 
		 // 获取输入关键字
		 var keyword = $("#hotelName").val();
		 
	 	 $.ajax({
	 		 async:true,
	 		 type:"get",
	 		 url:"${pageContext.request.contextPath}/HotelServlet",
	 		 data:{
	 			 op:"searchByPage",
	 			 pageNum:pageNum,
	 			 pageSize:pageSize,
	 			 keyword:keyword
	 		 },
	 		 dataType:"json",
	 		 success:function(result){
	 			// 调用渲染函数
	 			 showData(result);
	 		 },
	 		 error:function(){
	 			 alert("异步请求失败!");
	 		 }
	 	 });
	}

		 // 渲染数据
       	function showData(result){
           	
       		 // 渲染表格数据
       		/*  var content = "<div class=\"col-12\">"+
				              "<div class=\"listing-top-heading mb-xl-20\">"+
				              "<h6 class=\"no-margin text-custom-black\"></h6>"+
				              "<div class=\"sort-by\">"+
				                 "<span class=\"text-custom-black fs-14 fw-600\">排序方式</span>"+
				                 "<div class=\"group-form\">"+
				                     "<select class=\"form-control form-control-custom custom-select\">"+
				                         "<option>价格从高到低</option>"+
				                         "<option>价格从低到高</option>"+
				                     "</select>"+
				                 "</div>"+
				             "</div>"+
				         "</div>"+
     				"</div>"; */
     		var content="";
       		 // 没有数据
       		 if(result.length == 0){
       			 /* $("#tbody-hotelList").html("无相关数据"); */
       			 alert("无相关数据");
       		 }else{
       			 for(var i = 0; i < result.data.length; i++){
       				 
       				 var hotel = result.data[i];
       				 content += "<div class=\"col-xl-3 col-lg-4 col-md-6\">"+
	                   				 "<div class=\"hotel-grid mb-xl-30\">"+
                       					 "<div class=\"hotel-grid-wrapper bx-wrapper\">"+
                            				"<div class=\"image-sec animate-img\">"+
                               				 	"<a href=\"hotel-detail.jsp?hotelId="+hotel.hotelId+"&hotelName="+hotel.hotelName+"&hotelPicture="+hotel.hotelPicture+"\">"+
                                    				"<img href=\"hotel-detail.jsp?hotelId="+hotel.hotelId+"&hotelName="+hotel.hotelName+"&hotelPicture="+hotel.hotelPicture+"\" id=\"hotelPictureClick\" src=\"../HotelFileDownloadServlet?fileName="+hotel.hotelPicture+"\" class=\"full-width\" alt=\"img\">"+
                                				"</a>"+
                            				"</div>"+
                            				"<div class=\"hotel-grid-caption padding-20 bg-custom-white p-relative\">"+
                               					"<h4 class=\"title fs-16\"><a id=\"hotelPictureAClick\" href=\"hotel-detail.jsp?hotelId="+hotel.hotelId+"&hotelName="+hotel.hotelName+"&hotelPicture="+hotel.hotelPicture+"\" class=\"text-custom-black\">"+hotel.hotelName+"<small class=\"text-light-dark\"></small></a></h4>"+
                               				 	"<span class=\"price\"><small></small></span>"+
                                				"<div class=\"action\">"+
                                    				"<a href=\"hotel-detail.jsp?hotelId="+hotel.hotelId+"&hotelName="+hotel.hotelName+"&hotelPicture="+hotel.hotelPicture+"\" class=\"btn-second btn-small\" href=\"#\">进入店铺</a>"+
                                    				"<a class=\"btn-first btn-submit \" id=\"btnGallery\" href=\"#\" data-hotelid=\""+hotel.hotelId+"\">收藏</a>"+
                               			 		"</div>"+
                            				"</div>"+
                        				"</div>"+
                    				"</div>"+
               			 		"</div>";
       			 }
       			 $("#load-hotels-div").html(content);
       			 
       			 //渲染分页信息
       			 var pageInfo = "";
       			 if(result.pageNum == 1){
       				 pageInfo += "<div class=\"col-12\" id=\"pageInfo\" data-pagenum=\""+result.pageNum+"\"  data-pages=\""+result.pages+"\">"+
       				 				"<nav>"+
       									"<ul class=\"pagination justify-content-center\">"+
     										"<li class=\"page-item\"><a id=\"first-page\" class=\"page-link\" href=\"#\" disabled=\"disabled\">首页</a></li>"+
     										"<li class=\"page-item\"><a id=\"previous-page\"  class=\"page-link\" href=\"#\" disabled=\"disabled\">上一页</a></li>";
       			 }else{
       				 pageInfo += "<div class=\"col-12\" id=\"pageInfo\" data-pagenum=\""+result.pageNum+"\"  data-pages=\""+result.pages+"\">"+
		 							"<nav>"+
										"<ul class=\"pagination justify-content-center\">"+
											"<li class=\"page-item\"><a id=\"first-page\" class=\"page-link\" href=\"#\">首页</a></li>"+
											"<li class=\"page-item\"><a id=\"previous-page\" class=\"page-link\" href=\"#\">上一页</a></li>";
       			 }
       			 
       			 for(var i = 1; i <= result.pages; i++){
       				 // 设置当前的页面激活样式
       				 if(result.pageNum == i){
       					 pageInfo += "<li class=\"page-item active\"><a class=\"page-link current-page\" href=\"#\">"+i+"</a></li>"; // 是当前页面
       				 } else{
       					 pageInfo += "<li class=\"page-item\"><a class=\"page-link current-page\" href=\"#\">"+i+"</a></li>";
       				 }
       			 }
       			 
       	 		if(result.pageNum == result.pages){
       	 			 pageInfo += "<li class=\"page-item\"><a class=\"page-link\" id=\"next-page\" href=\"#\">下一页</a></li>";
       	 			 pageInfo += "<li class=\"page-item\"><a class=\"page-link\" id=\"last-page\" href=\"#\" disabled=\"disabled\">尾页</a></li>";
       			}else{
       				 pageInfo += "<li class=\"page-item\"><a class=\"page-link\" id=\"next-page\" href=\"#\">下一页</a></li>";
       				 pageInfo += "<li class=\"page-item\"><a class=\"page-link\" id=\"last-page\" href=\"#\" disabled=\"disabled\">尾页</a></li>";
       			}
       	 		pageInfo += "</ul>";
       	 		pageInfo += "</nav>";
       	 		$("#hotels-page").html(pageInfo);
       			
       		 }
        }
		 
	
 </script> </body> </html>
 
 
 
 
 